@charset 'UTF-8';

.container {
    width: 1200px;
    margin: 0 auto;
}


@media screen and (min-width:1000px) {
    .products_warp {
        .main_pic {
            img {
                width: 100%;
            }
        }
    
        .main_pic_b {
            overflow: hidden;
    
            .container {
                .title {
                    h2 {
                        font-size: 26px;
                        margin-top: 50px;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #ccc;
                        color: #6e7276;
                    }
                }
    
                .cons {
                    margin-top: 30px;
    
                    .imgs {
                        overflow: hidden;
    
                        img {
                            &:hover {
                                transition: 0.8s all ease;
                                transform: scale(1.1);
                            }
    
                            width: 100%;
                            height: auto;
                        }
    
                    }
    
                    .content {
                        margin-top: 40px;
                        margin-left: 40px;
    
                        h4 {
                            color: #024199;
                            margin-bottom: 16px;
                            visibility: visible;
                            animation-duration: 1s;
                            animation-delay: 0.2s;
                            animation-name: fadeInLeft;
                        }
    
                        p {
                            visibility: visible;
                            animation-duration: 1s;
                            animation-delay: 0.3s;
                            animation-name: fadeInRight;
                        }
                    }
                }
            }
        }
    
        .main_pic2 {
            width: 100%;
            height: 470px;
            background-image: url(../images/brank_\ products1.3.jpg);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            margin: 70px 0 0;
    
            .container {
                .cons {
                    color: white;
                    text-align: center;
    
                    .title {
                        h2 {
                            font-size: 38px;
                            visibility: visible;
                            animation-duration: 1s;
                            animation-delay: 0s;
                            animation-name: fadeInUp;
                        }
    
                    }
    
                    .con {
                        visibility: visible;
                        animation-duration: 1s;
                        animation-delay: 0.2s;
                        animation-name: fadeInUp;
                        width: 80%;
                        margin: 2em auto 0;
    
                        p {
                            margin-bottom: 5px;
    
                            &:nth-of-type(4) {
                                margin-top: 20px;
                            }
                        }
                    }
                }
            }
        }
    
        .main_pic2_b {
            margin-top: 60px;
    
            .container {
                .cons {
                    ul {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
    
                        li {
                            width: 33%;
    
                            .con {
                                margin-bottom: 20px;
    
                                .centent {
                                    position: relative;
                                    span {
                                        position: absolute;
                                        background: url(../images/video.png) no-repeat;
                                        width: 35px;
                                        height: 41px;
                                        margin: -20px 0 0 -17px;
                                        top: 36%;
                                        left: 50%;
                                    }
                                    a {
                                        text-decoration: none;
                                        img {
                                            width: 100%;
                                        }
    
                                        &:nth-of-type(1) {
                                            img {
                                                width: 100%;
                                            }
                                        }
    
                                        &:nth-of-type(2) {
                                            color: #2b43a7;
                                            display: block;
                                            padding: 16px 20px 20px;
                                            margin-top: 10px;
                                            border: 4px solid #2b43a7;
                                            &:hover {
                                                background: #f0f2f8;
                                            }
    
                                            p {
                                                font-size: 16px;
                                                line-height: 1.5;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                            }
                                        }
                                    }
    
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width:750px) {
    html {
        font-size: calc(100vw/7.5);
    }
    .container {
        width: 355px;
        margin: 0 auto;
        overflow: hidden;
    }

    .products_warp {
        .main_pic {
            position: relative;
            img {
                position: absolute;
                height: 150px;
                width: auto;
                left: 50%;
                margin-left: -365px;
            }
        }
    
        .main_pic_b {
            overflow: hidden;
    
            .container {
                .title {
                    h2 {
                        margin-top: 50px;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #ccc;
                        color: #6e7276;
                    }
                }
    
                .cons {
                    margin-top: 30px;
    
                    .imgs {
                        overflow: hidden;
    
                        img {
                            width: 100%;
                            height: auto;
                        }
    
                    }
    
                    .content {
                        margin-top: 40px;
                        margin-left: 40px;
    
                        h4 {
                            color: #024199;
                            margin-bottom: 16px;
                            visibility: visible;
                            animation-duration: 1s;
                            animation-delay: 0.2s;
                            animation-name: fadeInLeft;
                        }
    
                        p {
                            visibility: visible;
                            animation-duration: 1s;
                            animation-delay: 0.3s;
                            animation-name: fadeInRight;
                        }
                    }
                }
            }
        }
    
        .main_pic2 {
            width: 100%;
            height: 470px;
            background-image: url(../images/brank_\ products1.3.jpg);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            margin: 70px 0 0;
    
            .container {
                .cons {
                    color: white;
                    text-align: center;
    
                    .title {
                        h2 {
                            font-size: 38px;
                            visibility: visible;
                            animation-duration: 1s;
                            animation-delay: 0s;
                            animation-name: fadeInUp;
                        }
    
                    }
    
                    .con {
                        visibility: visible;
                        animation-duration: 1s;
                        animation-delay: 0.2s;
                        animation-name: fadeInUp;
                        width: 80%;
                        margin: 2em auto 0;
    
                        p {
                            margin-bottom: 5px;
    
                            &:nth-of-type(4) {
                                margin-top: 20px;
                            }
                        }
                    }
                }
            }
        }
    
        .main_pic2_b {
            margin-top: 60px;
    
            .container {
                .cons {
                    ul {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
    
                        li {
                            width: 33%;
    
                            .con {
                                margin-bottom: 20px;
    
                                .centent {
                                    position: relative;
                                    span {
                                        position: absolute;
                                        background: url(../images/video.png) no-repeat;
                                        width: 35px;
                                        height: 41px;
                                        margin: -20px 0 0 -17px;
                                        top: 36%;
                                        left: 50%;
                                    }
                                    a {
                                        text-decoration: none;
                                        img {
                                            width: 100%;
                                        }
    
                                        &:nth-of-type(1) {
                                            img {
                                                width: 100%;
                                            }
                                        }
    
                                        &:nth-of-type(2) {
                                            color: #2b43a7;
                                            display: block;
                                            padding: 16px 20px 20px;
                                            margin-top: 10px;
                                            border: 4px solid #2b43a7;
                                            &:hover {
                                                background: #f0f2f8;
                                            }
    
                                            p {
                                                font-size: 16px;
                                                line-height: 1.5;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                            }
                                        }
                                    }
    
                                }
                            }
                        }
                    }
                }
            }
        }
    }

}